<template>
  <view 
    class="station-item" 
    :style="modifyWidth?'width:90%':'width:85%'"
    :class="{ 'station-item-with-shop': station.shopName }"
    @click="handleCardClick"
  >
    <view class="station-info">
      <!-- <view class="station-jam" v-if="station.shopName">
        <image src="/static/images/编组 10@2x.png" class="station-jam-image" />
      </view> -->
      <view class="station-header">
        <text class="station-name">{{ station.name || '未知站点' }}</text>
        <view class="station-distance" @click.stop="handleLocationClick">
          <uni-icons type="paperplane-filled" color="#666666" />
          <text class="distance-text">{{ station.distance || '距离未知' }}</text>
        </view>
      </view>
      <view class="station-details">
        <text class="station-facilities">{{ station.facilities || '暂无设施信息' }}</text>
      </view>
      
      <!-- 驿站额外信息 -->
      <view v-if="station.shopName" class="station-extra-info">
        <view class="station-business-time" v-if="station.businessTime">
          <text class="business-time-label">营业时间：</text>
          <text class="business-time-text">{{ truncateText(station.businessTime, 25) }}</text>
        </view>
        <view class="station-address" v-if="station.address">
          <text class="address-label">具体地址：</text>
          <text class="address-text">{{ truncateText(station.address, 30) }}</text>
        </view>
      </view>
      
      <view class="station-pricing">
        <text class="price-label">¥</text>
        <text class="price-amount">{{ station.price || '0.00' }}</text>
        <text class="price-unit">元/度 起</text>
        <view v-if="modifyWidth" class="vip-price-badge">
          <view class="vip-price-label">VIP价</view>
          <view class="vip-price-value">¥{{ station.vipFee || '0.00' }}元/度</view>
        </view>
        <view class="station-status">
          <view class="station-rating-rateIcon">
            <text class="station-rating-rate">快</text>
          </view>
          <view class="station-rating-text-numBg">
            <text class="station-rating-text-num">闲{{ station.fastRate || '0/0' }}</text>
          </view>
        </view>
      </view>
      <!-- <view class="member-price-badge">
        <view class="member-price-label">会员价</view>
        <view class="member-price-value">0.85元/度</view>
      </view> -->
      <view class="station-rating">
        <view class="station-rating-icon">
          <text class="station-rating-p">P</text>
        </view>
        <view class="station-rating-text-bg">
          <text class="station-rating-text">{{ truncateText(station.parkFee || '停车信息未知', 20) }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'

export default {
  name: 'StationCard',
  components: {
    uniIcons
  },
  props: {
    // 站点数据
    station: {
      type: Object,
      required: true,
      default: () => ({})
    },
    // 是否显示位置点击功能
    showLocationClick: {
      type: Boolean,
      default: true
    },
    // 是否修改卡片宽度
    modifyWidth: {
      type: Boolean,
      default: false
    },
  },
  methods: {
    // 处理卡片点击
    handleCardClick() {
      this.$emit('card-click', this.station)
    },
    
    // 处理位置点击
    handleLocationClick() {
      if (this.showLocationClick) {
        this.$emit('location-click', this.station)
      }
    },

    // 截断文本，超出部分用省略号表示
    truncateText(text, maxLength) {
      if (!text || text.length <= maxLength) {
        return text;
      }
      return text.substring(0, maxLength) + '...';
    }
  }
}
</script>

<style scoped>
.vip-price-badge {
  /* width: 196rpx;
  height: 36rpx; */
  background: #FEE6C3;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  height: 32rpx;
  display: flex;
  /* padding: 8rpx; */
  padding-right: 8rpx;
}
.vip-price-label {
  width: 78rpx;
  height: 36rpx;
  background: #363637;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 24rpx;
  color: #FFF1CC;
  line-height: 32rpx;
  text-align: center;
}
.vip-price-value {
  /* font-family: Barlow, Barlow; */
  font-weight: 500;
  font-size: 24rpx;
  color: #000000;
  line-height: 32rpx;
  text-align: center;
  padding-left: 8rpx;
  /* padding: 8rpx; */
}
.station-item {
  width: 85%;
  /* margin: 0 auto 20rpx auto; */
  margin: 0 auto;
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 4rpx 16rpx rgba(255, 153, 0, 0.08);
  padding: 30rpx;
  display: flex;
  position: relative;
}

.station-item-with-shop {
  position: relative;
}

/* .station-item-with-shop::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1rpx;
  height: 100%;
  background: linear-gradient(to bottom, rgba(234, 201, 188, 1), rgba(232, 207, 188, 0.3));
}

.station-item-with-shop::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1rpx;
  background: linear-gradient(to right, rgba(185, 122, 86, 1), rgba(232, 207, 188, 0.3));
} */

.station-info {
  flex: 1;
}

.station-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.station-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.station-distance {
  display: flex;
  align-items: center;
  border: 1rpx solid #e5e5e5;
  border-radius: 24rpx;
  padding: 4rpx 8rpx;
}

.distance-text {
  font-size: 24rpx;
  color: #666;
}

.station-details {
  margin-bottom: 15rpx;
}

.station-facilities {
  font-size: 24rpx;
  color: #666;
}

.station-extra-info {
  margin-bottom: 15rpx;
  padding-top: 10rpx;
  border-top: 1rpx dashed #eee;
}

.station-business-time,
.station-address {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 5rpx;
}

.business-time-label,
.address-label {
  font-weight: bold;
  color: #333;
  margin-right: 10rpx;
}

.business-time-text,
.address-text {
  flex: 1;
  word-break: break-all;
}

.station-pricing {
  display: flex;
  align-items: baseline;
}

.price-label {
  font-size: 24rpx;
  color: #ff6b35;
}

.price-amount {
  font-size: 36rpx;
  font-weight: bold;
  color: #ff6b35;
}

.price-unit {
  font-size: 24rpx;
  color: #ff6b35;
  margin-right: 20rpx;
}

.station-status {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.station-rating {
  display: flex;
  align-items: center;
  background: none;
  padding: 0;
}

.station-rating-icon {
  width: 36rpx;
  height: 36rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #bfc3c9 0%, #e6e8eb 100%);
  margin-right: 0;
}

.station-rating-rateIcon {
  width: 36rpx;
  height: 36rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #ff6b35 0%, #ffb59a 100%);
  margin-right: 0;
}

.station-rating-p {
  color: #fff;
  font-weight: bold;
  font-size: 24rpx;
}

.station-rating-rate {
  color: #fff;
  font-size: 20rpx;
  font-weight: bold;
}

.station-rating-text-bg {
  background: #f5f6f7;
  border-radius: 0 8rpx 8rpx 0;
  padding: 0 12rpx;
  height: 36rpx;
  display: flex;
  align-items: center;
}

.station-rating-text-numBg {
  background: #fff7f5;
  border-radius: 0 8rpx 8rpx 0;
  padding: 0 12rpx;
  height: 36rpx;
  display: flex;
  align-items: center;
}

.station-rating-text {
  color: #888;
  font-size: 22rpx;
}

.station-rating-text-num {
  color: #ff6b35;
  font-size: 20rpx;
  font-weight: bold;
}

.member-price-badge {
  display: inline-flex;
  align-items: center;
  height: 36rpx;
  border-radius: 8rpx;
  overflow: hidden;
  margin-bottom: 10rpx;
}

.member-price-label {
  background: #ff6b35;
  color: #fff;
  font-size: 18rpx;
  font-weight: bold;
  padding: 0 12rpx;
  height: 36rpx;
  display: flex;
  align-items: center;
  border-radius: 8rpx 0 0 8rpx;
  box-sizing: border-box;
}

.member-price-value {
  position: relative;
  background: #fff;
  color: #ff6b35;
  font-size: 18rpx;
  font-weight: bold;
  padding: 0 16rpx;
  height: 36rpx;
  display: flex;
  align-items: center;
  border-radius: 0 8rpx 8rpx 0;
  border: 2rpx solid #ff6b35;
  border-left: none;
  box-sizing: border-box;
}

.member-price-value::before {
  content: '';
  position: absolute;
  left: -12rpx;
  top: 0;
  width: 24rpx;
  height: 36rpx;
  background: #fff;
  border-radius: 18rpx 0 0 18rpx;
  z-index: 1;
}

.station-jam {
  position: absolute;
  top: -5rpx;
  left: -1rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.station-jam-image {
  width: 110rpx;
  height: 44rpx;
}
</style> 